<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<%@ page contentType="text/html;charset=ISO-8859-1" %>

<html>
  <head>
    <meta name="layout" content="hctrauma-modal" />
    <title>Indicadores</title>

    <style type="text/css">
      <%
        int cantCabCol = 0
        int cantCabFila = 0
        if (mostrarDatos){
          cantCabCol = estructuraTabla.cabezalesColumna.length
          cantCabFila = estructuraTabla.cabezalesFila.length

          // Creo las clases css para los cabezales
          def arrayColoresColumnas = ["99CC00", "CCFF66", "DDFF99", "EEFFAA"] // Si se necesitan mas colores se usa FFFFFF
          def arrayColoresFilas = ["3366FF", "99CCFF", "DDEEFF", "DFFFFF"] // Si se necesitan mas colores se usa FFFFFF

          for(int i=0; i < cantCabCol; i++){
            String colorCol = (i < arrayColoresColumnas.size()) ? arrayColoresColumnas[i] : "FFFFFF"
          %>
          .celdaCabezalColumna${i+1}{ /* Corresponde a las celdas (${i+1},i) */
                  background-color: ${"#"}${colorCol};
                  text-align: center;
          }
          <%
          }
          for(int i=0; i < cantCabFila; i++){
            String colorFila = (i < arrayColoresFilas.size()) ? arrayColoresFilas[i] : "FFFFFF"
          %>
          .celdaCabezalFila${i+1}{ /* Corresponde a las celdas (i,${i+1}) */
                  background-color: ${"#"}${colorFila};
                  text-align: center;
          }
          <%
          }
          %>
      <%}%>
        .tablaPrincipal{
                background-color: #333333;
                border-style: solid;
                border-width: 0px;
                width: 100%;
        }
        .celdaInicio{ /* Corresponde a la celda (0,0) */
                background-color: #FFCC66;
        }
        .celdaIntermedia{ /* Corresponde a la celda continuacion del nombre de los cabezales */
                background-color: #FFCC66;
        }
        .celdaDatos{ /* Corresponde a las celdas de datos */
                background-color: #FFFF99;
                min-width: 20px;
                text-align: center;
        }

        /* Crear una clase celdaCabezalColumnaI o celdaCabezalFilaI */
        /* por cada columna o fila extra respectivamente */
    </style>

  </head>
  <body>
    <h1><g:message code="${nombreIndicador}" /></h1>
    <ul class="top_actions">
      <li>
        <g:link action="index" class="back"><g:message code="indicadores.list.backToIndex" /></g:link>
      </li>
    </ul>
    
    <div style="padding: 8px">
      <g:message code="${descripcionIndicador}" />
    </div>

    <g:form action="${idIndicador}">
      <div style="border-style: solid; border-width: 1px; width: 500px; padding: 4px; background-color: #FFCC66">
        <div style="float: left; width: 100px;">
          <h3>Filtros</h3>
        </div>
        <div style="height: 25px">
          <div style="width: 50px; float: left">Desde: </div>
          <% if (fechaDesde) fechaDesde.setYear(fechaDesde.getYear() - 1900) // Resto porque internamente java guarda el año mas 1900%>
          <% if (fechaDesde) fechaDesde.setMonth(fechaDesde.getMonth() - 1) // Resto porque internamente en java los meses comienzan en 0%>
          <g:datePicker name="fechaDesde" value="${((fechaDesde) ? fechaDesde : null)}" precision="day" />
        </div>
        <div style="height: 25px">
          <div style="width: 50px; float: left">Hasta: </div>
          <% if (fechaHasta) fechaHasta.setYear(fechaHasta.getYear() - 1900) %>
          <% if (fechaHasta) fechaHasta.setMonth(fechaHasta.getMonth() - 1) %>
          <g:datePicker name="fechaHasta" value="${((fechaHasta) ? fechaHasta : null)}" precision="day" />
        </div>
        <%if (filtroCantDiagnosticos){%>
        <div style="height: 25px">
          <div style="width: 130px; float: left">Cant. Diagn&oacute;sticos: </div>
          <g:textField name="cantidadDiagnosticos" value="${cantidadDiagnosticos}" style="width: 119px; text-align: center" />
        </div>
        <%}%>
      </div>

      <div style="height: 10px"></div>

      <span>
        <g:submitButton name="obtenerDatos" value="Obtener Datos" />
      </span>

      <%if (mostrarDatos){%>
      <span style="padding: 10px;">
        <b>Cant. Episodios:</b> ${cantEpisodios}
      </span>
      <%}%>

      <div>
      </div>

    </g:form>

    <%if (mostrarDatos){%>
 
          <%
            // Creo dos arreglos en donde se almacenaran, los rowspan y colspan que vamos a necesitar
            int[] filaSpan = new int[cantCabFila]
            int[] columnaSpan = new int[cantCabCol]
            // Inicializo todos los elementos de los arreglos con 1
            for(int i=0;i<cantCabFila;i++){filaSpan[i]=1}
            for(int i=0;i<cantCabCol;i++){columnaSpan[i]=1}

            for (int i = 0; i < cantCabFila; i++){
                for (int j = (i+1); j < cantCabFila; j++){
                  filaSpan[i] = filaSpan[i] * estructuraTabla.cabezalesFila[j].opciones.length
                }
            }

            for (int i = 0; i < cantCabCol; i++){
                for (int j = (i+1); j < cantCabCol; j++){
                  columnaSpan[i] = columnaSpan[i] * estructuraTabla.cabezalesColumna[j].opciones.length
                }
            }

          %>
      <div>
        <table class="tablaPrincipal">
          <!-- Fila 1 -->
          <tr>
            <td class="celdaInicio" colspan="${cantCabFila}" rowspan="${cantCabCol}">&nbsp;</td>
            <td class="celdaCabezalColumna1" style="font-weight:bold">${estructuraTabla.cabezalesColumna[0].nombre}</td>
            <%estructuraTabla.cabezalesColumna[0].opciones.each{elem ->%>
            <td class="celdaCabezalColumna1" colspan="${columnaSpan[0]}">${elem}</td>
            <%}%>
          </tr>
          <%
          // Creo cada fila que posee cabezales de columna (por cada cabezal coumna va a haber una fila para cabezales columna)
          for(int i = 1; i < cantCabCol; i++){  // Para cada una de las columnas (exceptuando la primera)
          %>
          <!-- Fila ${(i+1)} -->
          <tr>
            <%
            // Calculo la cantidad de columnas cabezales que va en cada fila
            int cantColParaFila = 1//columnaSpan[0] // 6
            for(int k = 0; k <= i; k++){
              int cantOpciones = estructuraTabla.cabezalesColumna[k].opciones.length
              cantColParaFila = cantColParaFila * cantOpciones//columnaSpan[k] //
            }%>
            <td class="celdaCabezalColumna${i+1}" style="font-weight:bold">${estructuraTabla.cabezalesColumna[i].nombre}</td>
            <%// Escribo tantas filas (td) como cantColParaFila indique
            for(int j = 0; j < cantColParaFila; j++){
              int cantOpciones = estructuraTabla.cabezalesColumna[i].opciones.length
            %>
              <td class="celdaCabezalColumna${i+1}" colspan="${columnaSpan[i]}">${estructuraTabla.cabezalesColumna[i].opciones[j%cantOpciones]}</td>
            <%}%>
          </tr>
          <%}%>

          <!-- Inicio Filas con cabezales a nivel de fila y datos -->
          <%
          int cantFilas = 1;
          estructuraTabla.cabezalesFila.each{elem ->
            cantFilas = cantFilas * elem.opciones.length
          }
          int cantColDatos = 1;
          estructuraTabla.cabezalesColumna.each{elem ->
            cantColDatos = cantColDatos * elem.opciones.length
          }

          int indiceDatos = 0
          %>
          <!-- Fila ${(cantCabCol+1)} -->
          <tr>
          <%
          //Creo fila con nombre de cabezales de fila
          for(int i = 0; i < cantCabFila; i++){
          %>
            <td class="celdaCabezalFila${i+1}" style="font-weight:bold">${estructuraTabla.cabezalesFila[i].nombre}</td>
          <%
          }
          %>
            <td class="celdaIntermedia" colspan="${cantColDatos+1}">&nbsp;</td>
          </tr>

          <%
          int[] contadoresIndicesOpciones = new int[cantCabFila] // Arreglo auxiliar, en el llevo el conteo del indice de opcion proximo a colocar para cada cabezal de fila
          for(int i=0;i<cantCabFila;i++){contadoresIndicesOpciones[i]=0} // Inicializo todos los contadores en 0

          // Creo cada fila que tendra cabezales de fila y datos
          for(int i = 0; i < cantFilas; i++){%>
          <!-- Fila ${(i+2+cantCabCol)} -->
          <tr>
            <%
              for (int j = 0; j < filaSpan.length; j++){
                if ((i % filaSpan[j]) == 0){
                %>
            <td class="celdaCabezalFila${j+1}" rowspan="${filaSpan[j]}">${estructuraTabla.cabezalesFila[j].opciones[contadoresIndicesOpciones[j]]}</td>
            <%
                  contadoresIndicesOpciones[j] = (contadoresIndicesOpciones[j] + 1) % estructuraTabla.cabezalesFila[j].opciones.length // Los contadores al llegar al maximo, vuelve a 0
                }
              }
            %>
            <td class="celdaIntermedia">&nbsp;</td>
            <%

              for(int k = 0; k < cantColDatos; k++){
                String dato = resDatos[indiceDatos++]
            %>
            <td class="celdaDatos">${dato}</td>
            <%}%>
          </tr>
          <%}%>
        </table>
      </div>
    <%}%>
  </body>
</html>
